349. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2021-05-13 09:09:14 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

349.1 Files compared

#LocationFileLast Modified
1/Applications/Ampps/www/Porto 3.2.2/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/web/jsnavigation-menu.js2018-01-13 21:47:48 +0000
2/Applications/Ampps/www/Porto v4.0.0/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/web/jsnavigation-menu.js2018-01-13 21:47:48 +0000

349.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged11110
Changed00
Inserted00
Removed00

349.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

349.4 Active regular expressions

No regular expressions were active.

349.5 Comparison detail

1 /** 1 /**
2  * Copyright © 2015 Magento. All rights reserved. 2  * Copyright © 2015 Magento. All rights reserved.
3  * See COPYING.txt for license details. 3  * See COPYING.txt for license details.
4  */ 4  */
5 /*jshint jquery:true*/ 5 /*jshint jquery:true*/
6  6 
7 define([ 7 define([
8     "jquery", 8     "jquery",
9     "matchMedia", 9     "matchMedia",
10     "mage/template", 10     "mage/template",
11     "mage/dropdowns", 11     "mage/dropdowns",
12     "mage/terms" 12     "mage/terms"
13 ],function($, mediaCheck, mageTemplate) { 13 ],function($, mediaCheck, mageTemplate) {
14     'use strict'; 14     'use strict';
15  15 
16     $.widget('mage.navigationMenu', { 16     $.widget('mage.navigationMenu', {
17         options: { 17         options: {
18             itemsContainer: '> ul', 18             itemsContainer: '> ul',
19             topLevel: 'li.level0', 19             topLevel: 'li.level0',
20             topLevelSubmenu: '> .submenu', 20             topLevelSubmenu: '> .submenu',
21             topLevelHoverClass: 'hover', 21             topLevelHoverClass: 'hover',
22             expandedTopLevel: '.more', 22             expandedTopLevel: '.more',
23             hoverInTimeout: 300, 23             hoverInTimeout: 300,
24             hoverOutTimeout: 500, 24             hoverOutTimeout: 500,
25             submenuAnimationSpeed: 200, 25             submenuAnimationSpeed: 200,
26             collapsable: true, 26             collapsable: true,
27             collapsableDropdownTemplate: 27             collapsableDropdownTemplate:
28                 '<script type="text/x-magento-template">' + 28                 '<script type="text/x-magento-template">' +
29                     '<li class="level0 level-top more parent">' + 29                     '<li class="level0 level-top more parent">' +
30                         '<div class="submenu">' + 30                         '<div class="submenu">' +
31                             '<ul><%= elems %></ul>' + 31                             '<ul><%= elems %></ul>' +
32                         '</div>' + 32                         '</div>' +
33                     '</li>' + 33                     '</li>' +
34                 '</script>' 34                 '</script>'
35         }, 35         },
36  36 
37         _create: function() { 37         _create: function() {
38             this.itemsContainer = $(this.options.itemsContainer, this.element); 38             this.itemsContainer = $(this.options.itemsContainer, this.element);
39             this.topLevel = $(this.options.topLevel, this.element); 39             this.topLevel = $(this.options.topLevel, this.element);
40             this.topLevelSubmenu = $(this.options.topLevelSubmenu, this.topLevel); 40             this.topLevelSubmenu = $(this.options.topLevelSubmenu, this.topLevel);
41  41 
42             this._bind(); 42             this._bind();
43         }, 43         },
44  44 
45         _init: function() { 45         _init: function() {
46             if (this.options.collapsable) { 46             if (this.options.collapsable) {
47                 setTimeout($.proxy(function() { 47                 setTimeout($.proxy(function() {
48                     this._checkToCollapseOrExpand(); 48                     this._checkToCollapseOrExpand();
49                 }, this), 100); 49                 }, this), 100);
50             } 50             }
51         }, 51         },
52  52 
53         _bind: function() { 53         _bind: function() {
54             this._on({ 54             this._on({
55                 'mouseenter > ul > li.level0': function(e) { 55                 'mouseenter > ul > li.level0': function(e) {
56                     if (!this.entered) { // fix IE bug with 'mouseenter' event 56                     if (!this.entered) { // fix IE bug with 'mouseenter' event
57                         this.timeoutId && clearTimeout(this.timeoutId); 57                         this.timeoutId && clearTimeout(this.timeoutId);
58                         this.timeoutId = setTimeout($.proxy(function() { 58                         this.timeoutId = setTimeout($.proxy(function() {
59                             this._openSubmenu(e); 59                             this._openSubmenu(e);
60                         }, this), this.options.hoverInTimeout); 60                         }, this), this.options.hoverInTimeout);
61                         this.entered = true; 61                         this.entered = true;
62                     } 62                     }
63                 }, 63                 },
64                 'mouseleave > ul > li.level0': function(e) { 64                 'mouseleave > ul > li.level0': function(e) {
65                     this.entered = null; 65                     this.entered = null;
66  66 
67                     this.timeoutId && clearTimeout(this.timeoutId); 67                     this.timeoutId && clearTimeout(this.timeoutId);
68                     this.timeoutId = setTimeout($.proxy(function() { 68                     this.timeoutId = setTimeout($.proxy(function() {
69                         this._closeSubmenu(e.currentTarget); 69                         this._closeSubmenu(e.currentTarget);
70                     }, this), this.options.hoverOutTimeout); 70                     }, this), this.options.hoverOutTimeout);
71                 }, 71                 },
72                 'click': function(e) { 72                 'click': function(e) {
73                     e.stopPropagation(); 73                     e.stopPropagation();
74                 } 74                 }
75             }); 75             });
76  76 
77             $(document) 77             $(document)
78                 .on('click.hideMenu', $.proxy(function(e) { 78                 .on('click.hideMenu', $.proxy(function(e) {
79                     var isOpened = this.topLevel.filter(function() { 79                     var isOpened = this.topLevel.filter(function() {
80                         return $(this).data('opened'); 80                         return $(this).data('opened');
81                     }); 81                     });
82  82 
83                     if (isOpened) { 83                     if (isOpened) {
84                         this._closeSubmenu(null, false); 84                         this._closeSubmenu(null, false);
85                     } 85                     }
86                 }, this)); 86                 }, this));
87  87 
88             $(window) 88             $(window)
89                 .on('resize', $.proxy(function() { 89                 .on('resize', $.proxy(function() {
90                     this.timeoutOnResize && clearTimeout(this.timeoutOnResize); 90                     this.timeoutOnResize && clearTimeout(this.timeoutOnResize);
91                     this.timeoutOnResize = setTimeout($.proxy(function() { 91                     this.timeoutOnResize = setTimeout($.proxy(function() {
92                         if (this.options.collapsable) { 92                         if (this.options.collapsable) {
93                             if ($(this.options.expandedTopLevel, this.element).length) { 93                             if ($(this.options.expandedTopLevel, this.element).length) {
94                                 this._expandMenu(); 94                                 this._expandMenu();
95                             } 95                             }
96                             this._checkToCollapseOrExpand(); 96                             this._checkToCollapseOrExpand();
97                         } 97                         }
98                     }, this), 300); 98                     }, this), 300);
99                 }, this)); 99                 }, this));
100         }, 100         },
101  101 
102         _openSubmenu: function(e) { 102         _openSubmenu: function(e) {
103             var menuItem = e.currentTarget; 103             var menuItem = e.currentTarget;
104  104 
105             if (!$(menuItem).data('opened')) { 105             if (!$(menuItem).data('opened')) {
106                 this._closeSubmenu(menuItem, true, true); 106                 this._closeSubmenu(menuItem, true, true);
107  107 
108                 $(this.options.topLevelSubmenu, menuItem) 108                 $(this.options.topLevelSubmenu, menuItem)
109                     .slideDown(this.options.submenuAnimationSpeed, $.proxy(function() { 109                     .slideDown(this.options.submenuAnimationSpeed, $.proxy(function() {
110                         $(menuItem).addClass(this.options.topLevelHoverClass); 110                         $(menuItem).addClass(this.options.topLevelHoverClass);
111                         $(menuItem).data('opened', true); 111                         $(menuItem).data('opened', true);
112                     }, this)); 112                     }, this));
113             } else if ($(e.target).closest(this.options.topLevel)) { 113             } else if ($(e.target).closest(this.options.topLevel)) {
114                 $(e.target) 114                 $(e.target)
115                     .addClass(this.options.topLevelHoverClass) 115                     .addClass(this.options.topLevelHoverClass)
116                     .siblings(this.options.topLevel) 116                     .siblings(this.options.topLevel)
117                         .removeClass(this.options.topLevelHoverClass); 117                         .removeClass(this.options.topLevelHoverClass);
118             } 118             }
119         }, 119         },
120  120 
121         _closeSubmenu: function(menuItem, excludeCurrent, fast) { 121         _closeSubmenu: function(menuItem, excludeCurrent, fast) {
122             var topLevel = $(this.options.topLevel, this.element), 122             var topLevel = $(this.options.topLevel, this.element),
123                 activeSubmenu = $(this.options.topLevelSubmenu, menuItem || null); 123                 activeSubmenu = $(this.options.topLevelSubmenu, menuItem || null);
124  124 
125             $(this.options.topLevelSubmenu, topLevel) 125             $(this.options.topLevelSubmenu, topLevel)
126                 .filter(function() { 126                 .filter(function() {
127                     return excludeCurrent ? $(this).not(activeSubmenu) : true; 127                     return excludeCurrent ? $(this).not(activeSubmenu) : true;
128                 }) 128                 })
129                 .slideUp(fast ? 0 : this.options.submenuAnimationSpeed); 129                 .slideUp(fast ? 0 : this.options.submenuAnimationSpeed);
130  130 
131             topLevel 131             topLevel
132                 .removeClass(this.options.topLevelHoverClass) 132                 .removeClass(this.options.topLevelHoverClass)
133                 .data('opened', false); 133                 .data('opened', false);
134         }, 134         },
135  135 
136         _checkToCollapseOrExpand: function() { 136         _checkToCollapseOrExpand: function() {
137             if ($("html").hasClass("lt-640") || $("html").hasClass("w-640")) { 137             if ($("html").hasClass("lt-640") || $("html").hasClass("w-640")) {
138                 return; 138                 return;
139             } 139             }
140  140 
141             var navWidth = this.itemsContainer.width(), 141             var navWidth = this.itemsContainer.width(),
142                 totalWidth = 0, 142                 totalWidth = 0,
143                 startCollapseIndex = 0; 143                 startCollapseIndex = 0;
144  144 
145             $.each($(this.options.topLevel, this.element), function(index, item) { 145             $.each($(this.options.topLevel, this.element), function(index, item) {
146                 totalWidth = totalWidth + $(item).outerWidth(true); 146                 totalWidth = totalWidth + $(item).outerWidth(true);
147  147 
148                 if (totalWidth > navWidth && !startCollapseIndex) { 148                 if (totalWidth > navWidth && !startCollapseIndex) {
149                     startCollapseIndex = index - 2; 149                     startCollapseIndex = index - 2;
150                 } 150                 }
151             }); 151             });
152  152 
153             this[startCollapseIndex ? '_collapseMenu' : '_expandMenu'](startCollapseIndex); 153             this[startCollapseIndex ? '_collapseMenu' : '_expandMenu'](startCollapseIndex);
154         }, 154         },
155  155 
156         _collapseMenu: function(startCollapseIndex) { 156         _collapseMenu: function(startCollapseIndex) {
157             this.elemsToCollapse = this.topLevel.filter(function(index) { 157             this.elemsToCollapse = this.topLevel.filter(function(index) {
158                 return index > startCollapseIndex; 158                 return index > startCollapseIndex;
159             }); 159             });
160             this.elemsToCollapseClone = $('<div></div>').append(this.elemsToCollapse.clone()).html(); 160             this.elemsToCollapseClone = $('<div></div>').append(this.elemsToCollapse.clone()).html();
161  161 
162             this.collapsableDropdown = $( 162             this.collapsableDropdown = $(
163                 mageTemplate( 163                 mageTemplate(
164                     this.options.collapsableDropdownTemplate, 164                     this.options.collapsableDropdownTemplate,
165                     {elems: this.elemsToCollapseClone} 165                     {elems: this.elemsToCollapseClone}
166                 ) 166                 )
167             ); 167             );
168  168 
169             this.itemsContainer.append(this.collapsableDropdown); 169             this.itemsContainer.append(this.collapsableDropdown);
170             this.elemsToCollapse.detach(); 170             this.elemsToCollapse.detach();
171         }, 171         },
172  172 
173         _expandMenu: function() { 173         _expandMenu: function() {
174             this.elemsToCollapse && this.elemsToCollapse.appendTo(this.itemsContainer); 174             this.elemsToCollapse && this.elemsToCollapse.appendTo(this.itemsContainer);
175             this.collapsableDropdown && this.collapsableDropdown.remove(); 175             this.collapsableDropdown && this.collapsableDropdown.remove();
176         }, 176         },
177  177 
178         _destroy: function() { 178         _destroy: function() {
179             this._expandMenu(); 179             this._expandMenu();
180         } 180         }
181     }); 181     });
182  182 
183     /* 183     /*
184      * Provides "Continium" effect for submenu 184      * Provides "Continium" effect for submenu
185      * */ 185      * */
186     $.widget('mage.navigationMenu', $.mage.navigationMenu, { 186     $.widget('mage.navigationMenu', $.mage.navigationMenu, {
187         options: { 187         options: {
188             parentLevel: '> ul > li.level0', 188             parentLevel: '> ul > li.level0',
189             submenuAnimationSpeed: 150, 189             submenuAnimationSpeed: 150,
190             submenuContiniumEffect: false 190             submenuContiniumEffect: false
191         }, 191         },
192  192 
193         _init: function() { 193         _init: function() {
194             this._super(); 194             this._super();
195             this._applySubmenuStyles(); 195             this._applySubmenuStyles();
196         }, 196         },
197  197 
198         _applySubmenuStyles: function() { 198         _applySubmenuStyles: function() {
199             $(this.options.topLevelSubmenu, $(this.options.topLevel, this.element)) 199             $(this.options.topLevelSubmenu, $(this.options.topLevel, this.element))
200                 .removeAttr('style'); 200                 .removeAttr('style');
201  201 
202             $(this.options.topLevelSubmenu, $(this.options.parentLevel, this.element)) 202             $(this.options.topLevelSubmenu, $(this.options.parentLevel, this.element))
203                 .css({ 203                 .css({
204                     display: 'block', 204                     display: 'block',
205                     height: 0, 205                     height: 0,
206                     overflow: 'hidden' 206                     overflow: 'hidden'
207                 }); 207                 });
208         }, 208         },
209  209 
210         _openSubmenu: function(e) { 210         _openSubmenu: function(e) {
211             var menuItem = e.currentTarget, 211             var menuItem = e.currentTarget,
212                 submenu = $(this.options.topLevelSubmenu, menuItem), 212                 submenu = $(this.options.topLevelSubmenu, menuItem),
213                 openedItems = $(this.options.topLevel, this.element).filter(function() { 213                 openedItems = $(this.options.topLevel, this.element).filter(function() {
214                     return $(this).data('opened'); 214                     return $(this).data('opened');
215                 }); 215                 });
216  216 
217             if (submenu.length) { 217             if (submenu.length) {
218                 this.heightToAnimate = $(this.options.itemsContainer, submenu).outerHeight(true); 218                 this.heightToAnimate = $(this.options.itemsContainer, submenu).outerHeight(true);
219  219 
220                 if (openedItems.length) { 220                 if (openedItems.length) {
221                     this._closeSubmenu(menuItem, true, this.heightToAnimate, $.proxy(function() { 221                     this._closeSubmenu(menuItem, true, this.heightToAnimate, $.proxy(function() {
222                         submenu.css({ 222                         submenu.css({
223                             height: 'auto' 223                             height: 'auto'
224                         }); 224                         });
225                         $(menuItem) 225                         $(menuItem)
226                             .addClass(this.options.topLevelHoverClass); 226                             .addClass(this.options.topLevelHoverClass);
227                     }, this), e); 227                     }, this), e);
228                 } else { 228                 } else {
229                     submenu.animate({ 229                     submenu.animate({
230                         height: this.heightToAnimate 230                         height: this.heightToAnimate
231                     }, this.options.submenuAnimationSpeed, $.proxy(function() { 231                     }, this.options.submenuAnimationSpeed, $.proxy(function() {
232                         $(menuItem) 232                         $(menuItem)
233                             .addClass(this.options.topLevelHoverClass); 233                             .addClass(this.options.topLevelHoverClass);
234                     }, this)); 234                     }, this));
235                 } 235                 }
236  236 
237                 $(menuItem) 237                 $(menuItem)
238                     .data('opened', true); 238                     .data('opened', true);
239             } else { 239             } else {
240                 this._closeSubmenu(menuItem); 240                 this._closeSubmenu(menuItem);
241             } 241             }
242         }, 242         },
243  243 
244         _closeSubmenu: function(menuItem, excludeCurrent, heightToAnimate, callback, e) { 244         _closeSubmenu: function(menuItem, excludeCurrent, heightToAnimate, callback, e) {
245             var topLevel = $(this.options.topLevel, this.itemsContainer), 245             var topLevel = $(this.options.topLevel, this.itemsContainer),
246                 expandedTopLevel = e && $(e.target).closest(this.options.expandedTopLevel); 246                 expandedTopLevel = e && $(e.target).closest(this.options.expandedTopLevel);
247  247 
248             if (!excludeCurrent) { 248             if (!excludeCurrent) {
249                 $(this.options.topLevelSubmenu, $(this.options.parentLevel, this.element)) 249                 $(this.options.topLevelSubmenu, $(this.options.parentLevel, this.element))
250                     .animate({ 250                     .animate({
251                         height: 0 251                         height: 0
252                     }); 252                     });
253  253 
254                 topLevel 254                 topLevel
255                     .data('opened', false) 255                     .data('opened', false)
256                     .removeClass(this.options.topLevelHoverClass); 256                     .removeClass(this.options.topLevelHoverClass);
257             } else { 257             } else {
258                 var prevOpenedItem = topLevel.filter(function() { 258                 var prevOpenedItem = topLevel.filter(function() {
259                         return $(this).data('opened'); 259                         return $(this).data('opened');
260                     }), 260                     }),
261                     prevOpenedSubmenu = $(this.options.topLevelSubmenu, prevOpenedItem); 261                     prevOpenedSubmenu = $(this.options.topLevelSubmenu, prevOpenedItem);
262  262 
263                 prevOpenedSubmenu.animate({ 263                 prevOpenedSubmenu.animate({
264                     height: heightToAnimate 264                     height: heightToAnimate
265                 }, this.options.submenuAnimationSpeed, 'linear', function() { 265                 }, this.options.submenuAnimationSpeed, 'linear', function() {
266                     $(this).css({ 266                     $(this).css({
267                         height: 0 267                         height: 0
268                     }); 268                     });
269                     callback && callback(); 269                     callback && callback();
270                 }); 270                 });
271  271 
272                 prevOpenedItem 272                 prevOpenedItem
273                     .data('opened', false) 273                     .data('opened', false)
274                     .removeClass(this.options.topLevelHoverClass); 274                     .removeClass(this.options.topLevelHoverClass);
275             } 275             }
276         }, 276         },
277  277 
278         _collapseMenu: function() { 278         _collapseMenu: function() {
279             this._superApply(arguments); 279             this._superApply(arguments);
280             this._applySubmenuStyles(); 280             this._applySubmenuStyles();
281         } 281         }
282     }); 282     });
283  283 
284     //  Responsive menu 284     //  Responsive menu
285     $.widget('mage.navigationMenu', $.mage.navigationMenu, { 285     $.widget('mage.navigationMenu', $.mage.navigationMenu, {
286         options: { 286         options: {
287             responsive: false, 287             responsive: false,
288             origNavPlaceholder: '.page-header', 288             origNavPlaceholder: '.page-header',
289             mainContainer: 'body', 289             mainContainer: 'body',
290             pageWrapper: '.page-wrapper', 290             pageWrapper: '.page-wrapper',
291             openedMenuClass: 'opened', 291             openedMenuClass: 'opened',
292             toggleActionPlaceholder: '.block-search', 292             toggleActionPlaceholder: '.block-search',
293             itemWithSubmenu: 'li.parent', 293             itemWithSubmenu: 'li.parent',
294             titleWithSubmenu: 'li.parent > a', 294             titleWithSubmenu: 'li.parent > a',
295             submenu: 'li.parent > .submenu', 295             submenu: 'li.parent > .submenu',
296             toggleActionTemplate: 296             toggleActionTemplate:
297                 '<script type="text/x-magento-template">' + 297                 '<script type="text/x-magento-template">' +
298                     '<span data-action="toggle-nav" class="action toggle nav">Toggle Nav</span>' + 298                     '<span data-action="toggle-nav" class="action toggle nav">Toggle Nav</span>' +
299                 '</script>', 299                 '</script>',
300             submenuActionsTemplate: 300             submenuActionsTemplate:
301                 '<script type="text/x-magento-template">' + 301                 '<script type="text/x-magento-template">' +
302                     '<li class="action all">' + 302                     '<li class="action all">' +
303                         '<a href="<%= categoryURL %>"><span>All <%= category %></span></a>' + 303                         '<a href="<%= categoryURL %>"><span>All <%= category %></span></a>' +
304                     '</li>' + 304                     '</li>' +
305                 '</script>', 305                 '</script>',
306             navigationSectionsWrapperTemplate: 306             navigationSectionsWrapperTemplate:
307                 '<script type="text/x-magento-template">' + 307                 '<script type="text/x-magento-template">' +
308                     '<dl class="navigation-tabs" data-sections="tabs">' + 308                     '<dl class="navigation-tabs" data-sections="tabs">' +
309                     '</dl>' + 309                     '</dl>' +
310                 '</script>', 310                 '</script>',
311             navigationItemWrapperTemplate: 311             navigationItemWrapperTemplate:
312                 '<script type="text/x-magento-template">' + 312                 '<script type="text/x-magento-template">' +
313                     '<dt class="item title <% if (active) { %>active<% } %>" data-section="title">' + 313                     '<dt class="item title <% if (active) { %>active<% } %>" data-section="title">' +
314                         '<a class="switch" data-toggle="switch" href="#TODO"><%= title %></a>' + 314                         '<a class="switch" data-toggle="switch" href="#TODO"><%= title %></a>' +
315                     '</dt>' + 315                     '</dt>' +
316                     '<dd class="item content <% if (active) { %>active<%}%>" data-section="content">' + 316                     '<dd class="item content <% if (active) { %>active<%}%>" data-section="content">' +
317                     '</dd>' + 317                     '</dd>' +
318                 '</script>' 318                 '</script>'
319         }, 319         },
320  320 
321         _init: function() { 321         _init: function() {
322             this._super(); 322             this._super();
323  323 
324             this.mainContainer = $(this.options.mainContainer); 324             this.mainContainer = $(this.options.mainContainer);
325             this.pageWrapper = $(this.options.pageWrapper); 325             this.pageWrapper = $(this.options.pageWrapper);
326             this.toggleAction = $(mageTemplate(this.options.toggleActionTemplate, {})); 326             this.toggleAction = $(mageTemplate(this.options.toggleActionTemplate, {}));
327  327 
328             if (this.options.responsive) { 328             if (this.options.responsive) {
329                 mediaCheck({ 329                 mediaCheck({
330                     media: '(min-width: 768px)', 330                     media: '(min-width: 768px)',
331                     entry: $.proxy(function() { 331                     entry: $.proxy(function() {
332                         this._toggleDesktopMode(); 332                         this._toggleDesktopMode();
333                     }, this), 333                     }, this),
334                     exit: $.proxy(function() { 334                     exit: $.proxy(function() {
335                         this._toggleMobileMode(); 335                         this._toggleMobileMode();
336                     }, this) 336                     }, this)
337                 }); 337                 });
338             } 338             }
339         }, 339         },
340  340 
341         _bind: function() { 341         _bind: function() {
342             this._super(); 342             this._super();
343             this._bindDocumentEvents(); 343             this._bindDocumentEvents();
344         }, 344         },
345  345 
346         _bindDocumentEvents: function() { 346         _bindDocumentEvents: function() {
347             if (!this.eventsBound) { 347             if (!this.eventsBound) {
348                 $(document) 348                 $(document)
349                     .on('click.toggleMenu', '.action.toggle.nav', $.proxy(function(e) { 349                     .on('click.toggleMenu', '.action.toggle.nav', $.proxy(function(e) {
350                         if ($(this.element).data('opened')) { 350                         if ($(this.element).data('opened')) {
351                             this._hideMenu(); 351                             this._hideMenu();
352                         } else { 352                         } else {
353                             this._showMenu(); 353                             this._showMenu();
354                         } 354                         }
355                         e.stopPropagation(); 355                         e.stopPropagation();
356                         this.mobileNav.scrollTop(0); 356                         this.mobileNav.scrollTop(0);
357                         this._fixedBackLink(); 357                         this._fixedBackLink();
358                     }, this)) 358                     }, this))
359                     .on('click.hideMenu', this.options.pageWrapper, $.proxy(function() { 359                     .on('click.hideMenu', this.options.pageWrapper, $.proxy(function() {
360                         if ($(this.element).data('opened')) { 360                         if ($(this.element).data('opened')) {
361                             this._hideMenu(); 361                             this._hideMenu();
362                             this.mobileNav.scrollTop(0); 362                             this.mobileNav.scrollTop(0);
363                             this._fixedBackLink(); 363                             this._fixedBackLink();
364                         } 364                         }
365                     }, this)) 365                     }, this))
366                     .on('click.showSubmenu', this.options.titleWithSubmenu, $.proxy(function(e) { 366                     .on('click.showSubmenu', this.options.titleWithSubmenu, $.proxy(function(e) {
367                         this._showSubmenu(e); 367                         this._showSubmenu(e);
368  368 
369                         e.preventDefault(); 369                         e.preventDefault();
370                         this.mobileNav.scrollTop(0); 370                         this.mobileNav.scrollTop(0);
371                         this._fixedBackLink(); 371                         this._fixedBackLink();
372                     }, this)) 372                     }, this))
373                     .on('click.hideSubmenu', '.action.back', $.proxy(function(e) { 373                     .on('click.hideSubmenu', '.action.back', $.proxy(function(e) {
374                         this._hideSubmenu(e); 374                         this._hideSubmenu(e);
375                         this.mobileNav.scrollTop(0); 375                         this.mobileNav.scrollTop(0);
376                         this._fixedBackLink(); 376                         this._fixedBackLink();
377                     }, this)); 377                     }, this));
378  378 
379                 this.eventsBound = true; 379                 this.eventsBound = true;
380             } 380             }
381         }, 381         },
382  382 
383         _showMenu: function() { 383         _showMenu: function() {
384             $(this.element).data('opened', true); 384             $(this.element).data('opened', true);
385             this.mainContainer.add( "html" ).addClass(this.options.openedMenuClass); 385             this.mainContainer.add( "html" ).addClass(this.options.openedMenuClass);
386         }, 386         },
387  387 
388         _hideMenu: function() { 388         _hideMenu: function() {
389             $(this.element).data('opened', false); 389             $(this.element).data('opened', false);
390             this.mainContainer.add( "html" ).removeClass(this.options.openedMenuClass); 390             this.mainContainer.add( "html" ).removeClass(this.options.openedMenuClass);
391         }, 391         },
392  392 
393         _showSubmenu: function(e) { 393         _showSubmenu: function(e) {
394             $(e.currentTarget).addClass('action back'); 394             $(e.currentTarget).addClass('action back');
395             var submenu = $(e.currentTarget).siblings('.submenu'); 395             var submenu = $(e.currentTarget).siblings('.submenu');
396  396 
397             submenu.addClass('opened'); 397             submenu.addClass('opened');
398         }, 398         },
399  399 
400         _hideSubmenu: function(e) { 400         _hideSubmenu: function(e) {
401             var submenuSelector = '.submenu', 401             var submenuSelector = '.submenu',
402                 submenu = $(e.currentTarget).next(submenuSelector); 402                 submenu = $(e.currentTarget).next(submenuSelector);
403             $(e.currentTarget).removeClass('action back'); 403             $(e.currentTarget).removeClass('action back');
404             submenu.removeClass('opened'); 404             submenu.removeClass('opened');
405         }, 405         },
406  406 
407         _renderSubmenuActions: function() { 407         _renderSubmenuActions: function() {
408             $.each( 408             $.each(
409                 $(this.options.itemWithSubmenu), 409                 $(this.options.itemWithSubmenu),
410                 $.proxy( 410                 $.proxy(
411                     function(index, item) { 411                     function(index, item) {
412                         var actions = $( 412                         var actions = $(
413                             mageTemplate( 413                             mageTemplate(
414                                 this.options.submenuActionsTemplate, 414                                 this.options.submenuActionsTemplate,
415                                 { 415                                 {
416                                     category: $('> a > span', item).text(), 416                                     category: $('> a > span', item).text(),
417                                     categoryURL: $('> a', item).attr('href') 417                                     categoryURL: $('> a', item).attr('href')
418                                 } 418                                 }
419                             ) 419                             )
420                             ), 420                             ),
421                             submenu = $('> .submenu', item), 421                             submenu = $('> .submenu', item),
422                             items = $('> ul', submenu); 422                             items = $('> ul', submenu);
423                             items.prepend(actions); 423                             items.prepend(actions);
424                     }, 424                     },
425                     this 425                     this
426                 ) 426                 )
427             ); 427             );
428         }, 428         },
429  429 
430         _toggleMobileMode: function() { 430         _toggleMobileMode: function() {
431             this._expandMenu(); 431             this._expandMenu();
432  432 
433             $(this.options.topLevelSubmenu, $(this.options.topLevel, this.element)) 433             $(this.options.topLevelSubmenu, $(this.options.topLevel, this.element))
434                 .removeAttr('style'); 434                 .removeAttr('style');
435  435 
436             this.toggleAction.insertBefore(this.options.toggleActionPlaceholder); 436             this.toggleAction.insertBefore(this.options.toggleActionPlaceholder);
437             this.mobileNav = $(this.element).detach().clone(); 437             this.mobileNav = $(this.element).detach().clone();
438             this.mainContainer.prepend(this.mobileNav); 438             this.mainContainer.prepend(this.mobileNav);
439             this.mobileNav.find('> ul').addClass('nav'); 439             this.mobileNav.find('> ul').addClass('nav');
440             this._insertExtraItems(); 440             this._insertExtraItems();
441             this._wrapItemsInSections(); 441             this._wrapItemsInSections();
442             this.mobileNav.scroll($.proxy( 442             this.mobileNav.scroll($.proxy(
443                 function() { 443                 function() {
444                     this._fixedBackLink(); 444                     this._fixedBackLink();
445                 }, this 445                 }, this
446             )); 446             ));
447  447 
448             this._renderSubmenuActions(); 448             this._renderSubmenuActions();
449             this._bindDocumentEvents(); 449             this._bindDocumentEvents();
450         }, 450         },
451  451 
452         _toggleDesktopMode: function() { 452         _toggleDesktopMode: function() {
453             this.mobileNav && this.mobileNav.remove(); 453             this.mobileNav && this.mobileNav.remove();
454             this.toggleAction.detach(); 454             this.toggleAction.detach();
455             $(this.element).insertAfter(this.options.origNavPlaceholder); 455             $(this.element).insertAfter(this.options.origNavPlaceholder);
456  456 
457             $(document) 457             $(document)
458                 .off('click.toggleMenu', '.action.toggle.nav') 458                 .off('click.toggleMenu', '.action.toggle.nav')
459                 .off('click.hideMenu', this.options.pageWrapper) 459                 .off('click.hideMenu', this.options.pageWrapper)
460                 .off('click.showSubmenu', this.options.titleWithSubmenu) 460                 .off('click.showSubmenu', this.options.titleWithSubmenu)
461                 .off('click.hideSubmenu', '.action.back'); 461                 .off('click.hideSubmenu', '.action.back');
462  462 
463             this.eventsBound = false; 463             this.eventsBound = false;
464  464 
465             this._applySubmenuStyles(); 465             this._applySubmenuStyles();
466         }, 466         },
467  467 
468         _insertExtraItems: function() { 468         _insertExtraItems: function() {
469             if ($('.header.panel .switcher').length) { 469             if ($('.header.panel .switcher').length) {
470                 var settings = $('.header.panel .switcher') 470                 var settings = $('.header.panel .switcher')
471                     .clone() 471                     .clone()
472                     .addClass('settings'); 472                     .addClass('settings');
473  473 
474                 this.mobileNav.prepend(settings); 474                 this.mobileNav.prepend(settings);
475             } 475             }
476  476 
477             if ($('.footer .switcher').length) { 477             if ($('.footer .switcher').length) {
478                 var footerSettings = $('.footer .switcher') 478                 var footerSettings = $('.footer .switcher')
479                     .clone() 479                     .clone()
480                     .addClass('settings'); 480                     .addClass('settings');
481  481 
482                 this.mobileNav.prepend(footerSettings); 482                 this.mobileNav.prepend(footerSettings);
483             } 483             }
484  484 
485  485 
486             if ($('.header.panel .header.links li').length) { 486             if ($('.header.panel .header.links li').length) {
487                 var account = $('.header.panel > .header.links') 487                 var account = $('.header.panel > .header.links')
488                     .clone() 488                     .clone()
489                     .addClass('account'); 489                     .addClass('account');
490  490 
491                 this.mobileNav.prepend(account); 491                 this.mobileNav.prepend(account);
492             } 492             }
493         }, 493         },
494  494 
495         _wrapItemsInSections: function() { 495         _wrapItemsInSections: function() {
496             var account = $('> .account', this.mobileNav), 496             var account = $('> .account', this.mobileNav),
497                 settings = $('> .settings', this.mobileNav), 497                 settings = $('> .settings', this.mobileNav),
498                 nav = $('> .nav', this.mobileNav), 498                 nav = $('> .nav', this.mobileNav),
499                 navigationSectionsWrapper = $(mageTemplate(this.options.navigationSectionsWrapperTemplate, {})), 499                 navigationSectionsWrapper = $(mageTemplate(this.options.navigationSectionsWrapperTemplate, {})),
500                 navigationItemWrapper; 500                 navigationItemWrapper;
501  501 
502             this.mobileNav.append(navigationSectionsWrapper); 502             this.mobileNav.append(navigationSectionsWrapper);
503  503 
504             if (nav.length) { 504             if (nav.length) {
505                 navigationItemWrapper = $(mageTemplate(this.options.navigationItemWrapperTemplate, {title: 'Menu'})); 505                 navigationItemWrapper = $(mageTemplate(this.options.navigationItemWrapperTemplate, {title: 'Menu'}));
506                 navigationSectionsWrapper.append(navigationItemWrapper); 506                 navigationSectionsWrapper.append(navigationItemWrapper);
507                 navigationItemWrapper.eq(1).append(nav); 507                 navigationItemWrapper.eq(1).append(nav);
508             } 508             }
509  509 
510             if (account.length) { 510             if (account.length) {
511                 navigationItemWrapper = $(mageTemplate(this.options.navigationItemWrapperTemplate, {title: 'Account'})); 511                 navigationItemWrapper = $(mageTemplate(this.options.navigationItemWrapperTemplate, {title: 'Account'}));
512                 navigationSectionsWrapper.append(navigationItemWrapper); 512                 navigationSectionsWrapper.append(navigationItemWrapper);
513                 navigationItemWrapper.eq(1).append(account); 513                 navigationItemWrapper.eq(1).append(account);
514             } 514             }
515  515 
516             if (settings.length) { 516             if (settings.length) {
517                 navigationItemWrapper = $( 517                 navigationItemWrapper = $(
518                     mageTemplate(this.options.navigationItemWrapperTemplate, {title: 'Settings'}) 518                     mageTemplate(this.options.navigationItemWrapperTemplate, {title: 'Settings'})
519                 ); 519                 );
520                 navigationSectionsWrapper.append(navigationItemWrapper); 520                 navigationSectionsWrapper.append(navigationItemWrapper);
521                 navigationItemWrapper.eq(1).append(settings); 521                 navigationItemWrapper.eq(1).append(settings);
522             } 522             }
523  523 
524             navigationSectionsWrapper.addClass("navigation-tabs-" + navigationSectionsWrapper.find('[data-section="title"]').length); 524             navigationSectionsWrapper.addClass("navigation-tabs-" + navigationSectionsWrapper.find('[data-section="title"]').length);
525             navigationSectionsWrapper.terms(); 525             navigationSectionsWrapper.terms();
526         }, 526         },
527  527 
528         _fixedBackLink: function() { 528         _fixedBackLink: function() {
529             var linksBack = this.mobileNav.find('.submenu .action.back'); 529             var linksBack = this.mobileNav.find('.submenu .action.back');
530             var linkBack = this.mobileNav.find('.submenu.opened > ul > .action.back').last(); 530             var linkBack = this.mobileNav.find('.submenu.opened > ul > .action.back').last();
531  531 
532             linksBack.removeClass('fixed'); 532             linksBack.removeClass('fixed');
533  533 
534             if(linkBack.length) { 534             if(linkBack.length) {
535                 var subMenu = linkBack.parent(), 535                 var subMenu = linkBack.parent(),
536                     navOffset = this.mobileNav.find('.nav').position().top, 536                     navOffset = this.mobileNav.find('.nav').position().top,
537                     linkBackHeight = linkBack.height(); 537                     linkBackHeight = linkBack.height();
538  538 
539                 if (navOffset <= 0) { 539                 if (navOffset <= 0) {
540                     linkBack.addClass('fixed'); 540                     linkBack.addClass('fixed');
541                     subMenu.css({ 541                     subMenu.css({
542                         paddingTop: linkBackHeight 542                         paddingTop: linkBackHeight
543                     }) 543                     })
544                 } else { 544                 } else {
545                     linkBack.removeClass('fixed'); 545                     linkBack.removeClass('fixed');
546                     subMenu.css({ 546                     subMenu.css({
547                         paddingTop: 0 547                         paddingTop: 0
548                     }) 548                     })
549                 } 549                 }
550             } 550             }
551         } 551         }
552     }); 552     });
553  553 
554     return $.mage.navigationMenu; 554     return $.mage.navigationMenu;
555 }); 555 });

Araxis Merge (but not the data content of this report) is Copyright © 1993–2019 Araxis Ltd (www.araxis.com). All rights reserved.